/*
 * @Author: Zero
 * @Date: 2019-11-14 11:25:33
 * @Last Modified by: Zero
 * @Last Modified time: 2019-11-15 14:12:41
 */
<template>
  <div class="data-tab margin-top--70 margin-bottom-40 center-block">
    <div class="data-tab__header">
      <ul class="data-tab__nav clearfix">
        <li v-for="menu in config.menu" :key="menu.key"
          @click="config.key = menu.key" :class="{active:menu.key==config.key}" >
          <span>{{menu.label}}</span>
        </li>
      </ul>
    </div>

    <div class="data-tab__body" >
      <section class="data-tab__body--company" v-if="config.key==='company'">
        <div class="count-box">
          <h4 class="blue-title">
            各类型企业数量统计<small>(家)</small>
          </h4>
          <ul class="clearfix">
            <li v-for="(item,index) in comData" :key="index">
              <p>{{item.comName}}</p>
              <p>{{item.comNum}}</p>
            </li>
          </ul>
        </div>
        <div class="echarts-box clearfix">
          <div class="echarts-box__left">
            <h4 class="blue-title margin-bottom-20">入驻数量</h4>
            <div style="height: 350px">
              <barChart id="companyBar" />
            </div>
          </div>
          <div class="echarts-box__right">
            <h4 class="blue-title margin-bottom-20">企业注册地分布</h4>
            <div style="height: 350px">
              <comMap id="companyMap" :data="echartComData.typeList" />
            </div>
          </div>
        </div>
      </section>
      <section class="data-tab__body--person" v-if="config.key==='person'">
        <div class="echarts-box clearfix">
          <div class="echarts-box__left">
            <h4 class="blue-title margin-bottom-20">男女比例统计</h4>
            <div style="height: 350px">
              <sexPie id="sexPie" />
            </div>
          </div>
          <div class="echarts-box__right">
            <h4 class="blue-title margin-bottom-20">人员资格证书数量统计(排行)</h4>
            <div  style="height: 350px">
              <barChart id="personBar" />
            </div>
          </div>
        </div>
      </section>
     <!-- <section  class="data-tab__body&#45;&#45;project" v-if="config.key==='project'">
        <div class="renItem clearfix">
          <div class="renItemL" style="width: 740px;">
            <h4 class="blue-title">各项目类型数量统计(排行)</h4>
            <div class="echarts-1" style="width: 740px">
              <projectBar id="projectBar"/>
            </div>
          </div>
          <div class="renItemR" style="width: 370px;">
            <h4 class="blue-title">企业注册地分布热力图</h4>
            <div class="echarts-2" style="width: 370px">
              &lt;!&ndash;<comMap id="address" :data="echartComData.typeList"/>&ndash;&gt;
            </div>
          </div>
        </div>
      </section>
      <section  class="data-tab__body&#45;&#45;credit" v-if="config.key==='credit'">信用暂无</section>-->
    </div>
  </div>
</template>

<script>
// api
import { getMap } from "@/api/dataService/index";
// component
import comMap from "./charts/comMap";
import sexPie from "./charts/sexPie";
import barChart from "./charts/barChart";
import projectBar from "./charts/projectBar";
export default {
  components: {
    barChart,
    comMap,
    sexPie,
    projectBar
  },
  data() {
    return {
      config: {
        key: 'company',
        menu: [
          { key:'company', label: '企业' },
          { key:'person', label: '人员' },
          // { key:'project', label: '项目' },
          // { key:'credit', label: '信用' }
        ]
      },
      comData: [
        { comName: "累计企业总数", comNum: "26,028" },
        { comName: "建筑业企业", comNum: "10,543" },
        { comName: "勘察企业", comNum: "178" },
        { comName: "设计企业", comNum: "2028" },
        { comName: "监理企业", comNum: "228" },
        { comName: "工程质量检测机构", comNum: "6,028" },
        { comName: "造价咨询企业", comNum: "6,028" }
      ],
      echartComData: {
        typeList: []
      }
    };
  },
  created() {
    this.getMap();
  },
  methods: {
    getMap(data) {
      getMap(data).then(res => {
        this.echartComData.typeList = res.obj;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.data-tab {
  .data-tab__header {
    padding: 0 30px;background: white;
    .data-tab__nav {
      border-bottom: 1px solid #eeeeee; padding: 0;
      li {
        float: left;width: 50%;height: 70px;
        &.active span {
          color: #216DE5;
          border-bottom: 3px solid #216DE5;
        }
        span {
          font-size: 24px;
          display: inline-block;
          text-align: center;
          width: 100%;
          height: 100%;
          line-height: 66px;
          border-bottom: 3px solid transparent;
          cursor: pointer;
        }
      }
    }
  }
  .data-tab__body {
    padding: 27px 24px;height: 570px;box-shadow: 0 3px 20px rgba(24, 31, 42, 0.1);
    .data-tab__body--company {
      ul {
        padding-top: 20px;
        li {
          float: left;;margin-right: 70px;
        }
        li:last-child {
          margin-right: 0;
        }
        li p:first-child {
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 2px;
        }
        li p:first-child + p {
          font-size: 36px;
          color: #FF6F27;
          font-family: Avenir Next LT Pro;
        }
      }
      .echarts-box {
        padding-top: 20px;margin-bottom: 20px;
        .echarts-box__left {
          float: left;
          width: 720px;
          border-right: 1px solid #e6e6e6;
        }
        .echarts-box__right{
          float: right;
          width: 387px;
        }
      }
    }
    .data-tab__body--person, .data-tab__body--project {
      .echarts-box {
        margin-bottom: 20px;
        .echarts-box__left {
          width: 357px;
          float: left;
        }
        .echarts-box__right {
          width: 752px;
          float: right;
        }
      }
    }
  }
}
</style>
